<!-- Login.vue -->
<template>
  <div class="login-container">
    <el-image class="login-pic" :src="require('./img/login.png')"></el-image>
    <el-form
      class="login-form"
      label-width="80px"
      :model="user"
      :rules="rules"
      hide-required-asterisk
    >
      <el-form-item>
        <h1 class="login-form-heading">登录</h1>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="user.email" autofocus></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="login"
          :disabled="!canSubmit"
        >
          登录
        </el-button>
      </el-form-item>
      <div v-if="error">{{ error }}</div>
    </el-form>
    <p>还没有账号？<a href="#" @click="switchToRegister">点击注册</a></p>
  </div>
</template>

<script>
import { Image, Form, FormItem, Input, Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

export default {
  components: {
    ElImage: Image,
    ElForm: Form,
    ElFormItem: FormItem,
    ElInput: Input,
    ElButton: Button
  },
  data () {
    return {
      user: {
        email: '',
        password: '',
        username: ''
      },
      rules: {
        email: [
          { required: true, message: '邮箱必填', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' }
        ]
      },
      error: '',
      showPassword: false
    }
  },
  computed: {
    canSubmit () {
      const { email, password } = this.user
      return Boolean(email && password)
    }
  },
  methods: {
    login () {
      axios.post('/users/login', {
        email: this.user.email,
        password: this.user.password
      })
        .then(response => {
          const { token, username } = response.data // 从后端返回的数据中获取用户名和token
          localStorage.setItem('token', token)
          localStorage.setItem('username', username) // 保存用户名到 localStorage
          // 设置用户已登录的标志
          this.$root.userLoggedIn = true
          this.$root.username = username
          // 无需触发事件或直接重定向
          this.$router.push('home')
        })
        .catch(error => {
          this.error = error.response.data.message || '登录失败，请重试'
        })
    },
    switchToRegister () {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-pic {
  width: 30vw;
  min-width: 300px;
  margin-right: 100px;
}

.login-form {
  width: 30vw;
  min-width: 300px;
}

.el-form-item:last-child {
  margin-bottom: 0;
}

.login-form-heading {
  margin: 0;
}
</style>
